<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('个人答题记录')" />
    <style>
        .user-profile {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .user-info-item {
            margin-bottom: 10px;
            font-size: 14px;
        }
        .user-info-label {
            font-weight: bold;
            color: #333;
        }
        .exam-card {
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .exam-card:hover {
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }
        .exam-card .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e8e8e8;
            font-weight: bold;
        }
        .exam-card .card-body {
            padding: 20px;
        }
        .exam-item {
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .exam-item:last-child {
            border-bottom: none;
        }
        .exam-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .exam-info {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
        }
        .exam-actions {
            margin-top: 10px;
        }
        .btn-exam {
            margin-right: 10px;
        }
        .exam-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            margin-right: 10px;
        }
        .status-completed {
            background: #1ab394;
            color: white;
        }
        .start-new-exam {
            text-align: center;
            margin: 20px 0;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12">
                <!-- 用户信息 -->
<!--                <div class="user-profile">-->
<!--                    <h4><i class="fa fa-user"></i> 用户信息</h4>-->
<!--                    <div class="user-info-item">-->
<!--                        <span class="user-info-label">用户姓名：</span>-->
<!--                        <span th:text="${partyMember.name}"></span>-->
<!--                    </div>-->
<!--                    <div class="user-info-item">-->
<!--                        <span class="user-info-label">党员编号：</span>-->
<!--                        <span th:text="${partyMember.partyNo}"></span>-->
<!--                    </div>-->
<!--                    <div class="user-info-item">-->
<!--                        <span class="user-info-label">所属部门ID：</span>-->
<!--                        <span th:text="${partyMember.deptId}"></span>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->
                <div class="start-new-exam">
                    <button class="btn btn-primary btn-lg" onclick="startNewExam()">
                        <i class="fa fa-plus-circle"></i> 开始新的个人答题
                    </button>
                </div>
                
                <!-- 已完成的个人答题 -->
                <div class="exam-card" th:if="${examRecords != null and !examRecords.isEmpty()}">
                    <div class="card-header bg-success text-white">
                        <i class="fa fa-check-circle"></i> 已完成的个人答题
                    </div>
                    <div class="card-body">
                        <div class="exam-item" th:each="record : ${examRecords}">
                            <div class="exam-title" th:text="${'个人答题记录 #' + record.id}"></div>
                            <div class="exam-info">
                                <span>完成时间：<span th:text="${#dates.format(record.examDate, 'yyyy-MM-dd HH:mm')}"></span></span> |
                                <span>得分：<span th:text="${record.score}"></span>分</span> |
                                <span>题目数：<span th:text="${record.totalQuestion}"></span>题</span> |
                                <span>正确率：<span th:text="${record.totalQuestion != 0 ? (record.correctQuestion * 100 / record.totalQuestion) + '%' : '0%'}"></span></span>
                            </div>
                            <div>
                                <span class="exam-status status-completed">已完成</span>
                                <a class="btn btn-info btn-exam btn-sm" th:onclick="'viewExamDetail(' + ${record.id} + ')'"><i class="fa fa-eye"></i> 查看详情</a>
                                <!-- 根据要求隐藏重新答题按钮 -->
                                <!-- <a class="btn btn-warning btn-exam btn-sm" href="javascript:void(0);"><i class="fa fa-repeat"></i> 重新答题</a> -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 暂无记录 -->
                <div class="exam-card" th:if="${examRecords == null or examRecords.isEmpty()}">
                    <div class="card-header bg-info text-white">
                        <i class="fa fa-info-circle"></i> 答题记录
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">暂无个人答题记录</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    
    <script type="text/javascript">
        // 开始新的个人答题
        function startNewExam() {
            // 使用layer.open方式打开场次配置选择窗口
            layer.open({
                type: 2,
                title: "选择场次配置",
                area: ['800px', '600px'],
                content: ctx + "system/exam/personal/select_config",
                btn: ['开始答题', '关闭'],
                yes: function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    var configId = iframeWin.contentWindow.selectedConfig;
                    if (!configId) {
                        $.modal.alertWarning("请先选择一个场次配置");
                        return false;
                    }
                    
                    // 关闭弹窗并跳转到答题页面
                    layer.close(index);
                    window.location.href = ctx + "system/exam/personal/exam?configId=" + configId + "&examType=1";
                }
            });
        }
        
        // 查看答题详情
        function viewExamDetail(recordId) {
            // 打开新窗口显示答题详情
            layer.open({
                type: 2,
                title: "答题详情",
                area: ['900px', '600px'],
                content: ctx + "system/exam/personal/detail?recordId=" + recordId
            });
        }
    </script>
</body>
</html>